<div  class="panel-body">
  <div class="row">
  <label class="col-sm-2 control-label">库存</label>
  <div class="col-sm-8">
    <div class="form-group">
      <label class="col-sm-1 control-label">编码</label>
      <div class="col-sm-5">

        <input type="text" name="goods_sn" id="goodssn" class="form-control hasoption" value="{$item['goods_sn']}" {if $item['hasoption']}readonly{/if}//>

      </div>

      <label class=" col-sm-1 control-label">条码</label>
      <div class="col-sm-5">

        <input type="text" name="product_sn" id="productsn" class="form-control hasoption" value="{$item['product_sn']}" {if $item['hasoption']}readonly{/if}//>

      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-1 control-label">重量</label>
      <div class="col-sm-5">

        <div class="input-group">
          <input type="text" name="weight" id="weight" class="form-control hasoption" value="{$item['weight']}" {if $item['hasoption']}readonly{/if}/>
          <span class="input-group-addon">克</span>
        </div>

      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-1 control-label">库存</label>
      <div class="col-sm-11">

        <input type="text" name="total" id="total" class="form-control hasoption" value="{$item['total']}"  style="width:150px;display: inline;margin-right: 20px;" {if $item['hasoption']}readonly{/if}/>
        <label class="checkbox-inline">
<!--          <input type="checkbox" id="showtotal" value="1" name="showtotal" {if $item['showtotal']==1}checked{/if} />显示库存-->
        </label>
        <span class="help-block">商品的剩余数量, 如启用多规格，则此处设置无效.</span>

      </div>
    </div>
  </div>
  </div>
  <div class="hr-line-dashed"></div>

  <div class="row">
      <label class="col-sm-2 control-label">规格</label>

      <div class="col-sm-8">
          <div class="form-group">
              <div class="col-sm-11" style='padding-left:30px;'>

                  <label class="checkbox-inline">
                      <input type="checkbox" id="hasoption" value="1" name="hasoption" {if $item['hasoption']==1}checked{/if} />启用商品规格
                  </label>
                  <span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准</span>


              </div>
          </div>

          <div id='tboption' style="padding-left:15px;{if $item['hasoption']!=1}display:none{/if}" >
              <div class="alert alert-info">
                  1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br/>
                  2. 每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
              </div>
              <div id='specs'>
                  {foreach $allspecs as $spec}
                  {include file='goods/tpl/spec' /}
                  {/foreach}
              </div>

              <table class="table">
                  <tr>
                      <td>
                          <h4><a href="javascript:;" class='btn btn-primary' id='add-spec' onclick="addSpec()" title="添加规格"><i class='fa fa-plus'></i> 添加规格</a>
                              <a href="javascript:;" onclick="refreshOptions();" title="刷新规格项目表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格项目表</a></h4>
                      </td>
                  </tr>
              </table>

          <div id="options" style="padding:0;">{$html}</div>
      </div>
      </div>
  </div>

</div>
<input type="hidden" name="optionArray" value=''>
<script>
    $(function(){
        $('#specs').sortable({
            stop: function(){
                refreshOptions();
            }
        });
        $('.spec_item_items').sortable({
            stop: function(){
                refreshOptions();
            }
        });

        $(".spec_item_thumb").find('i').click(function(){
            var group  =$(this).parent();
            group.find('img').attr('src',"/static/images/nopic100.jpg");
            group.find(':hidden').val('');
            $(this).hide();
            group.find('img').popover('destroy');
        });


        $("#hasoption").click(function(){
            var obj = $(this);
            if (obj.get(0).checked){
                $('.hasoption').attr('readonly',true);
                $("#tboption").show();
                refreshOptions();
            }else{
                $('.hasoption').attr('readonly',false);
                $("#tboption").hide();
                refreshOptions();
                }
            });
    });
    $('#specs').on('click','.select-spec-item-image',function(){
        var specId = $(this).data('id')
        var thumbIndex = $(this).parents('.spec_item_item').index();

        layer.open({
            type: 2,
            title: '图片上传',
            shadeClose: true,
            shade: 0.3,
            area: ['400px', '400px'],
            content: "{:url('/admin/upload/index',array('name'=>'spec_item_pic'))}"+"?id=spec_item_"+specId+"&index="+thumbIndex,
        });
    })
    function uploadCallback(picUrl,id,index){
        $('#'+id).find('.spec_item_item').eq(index).find('img').attr('src',picUrl).popover({
            trigger: 'hover',
            html: true,
            container: $(document.body),
            content: "<img src='" + picUrl  + "' style='width:100px;height:100px;' />",
            placement: 'top'
        });
        $('#'+id).find('.spec_item_item').eq(index).find('.spec_item_thumb_input').val(picUrl);
    }

    function addSpec(){
        var len = $(".spec_item").length;

        $("#add-spec").html("正在处理...").attr("disabled", "true").toggleClass("btn-primary");
        var url = "{:url('goods/tpl',array('tpl'=>'spec'))}";
        $.ajax({
            "url": url,
            success:function(data){
                $("#add-spec").html('<i class="fa fa-plus"></i> 添加规格').removeAttr("disabled").toggleClass("btn-primary"); ;
                $('#specs').append(data);
                var len = $(".add-specitem").length -1;
                $(".add-specitem:eq(" +len+ ")").focus();
                refreshOptions();
            }
        });
    }
    function removeSpec(specid){
        if (confirm('确认要删除此规格?')){
            $("#spec_" + specid).remove();
            refreshOptions();
        }
    }
    function addSpecItem(specid){
        $("#add-specitem-" + specid).html("正在处理...").attr("disabled", "true");
        var url = "{:url('goods/tpl',array('tpl'=>'specitem'))}" + "?specid=" + specid;
        $.ajax({
            "url": url,
            success:function(data){
                $("#add-specitem-" + specid).html('<i class="fa fa-plus"></i> 添加规格项').removeAttr("disabled");
                $('#spec_item_' + specid).append(data);
                var len = $("#spec_" + specid + " .spec_item_title").length -1;
                $("#spec_" + specid + " .spec_item_title:eq(" +len+ ")").focus();
                refreshOptions
            }
        });
    }
    function removeSpecItem(obj){
        $(obj).closest('.spec_item_item').remove();
        refreshOptions();
    }

    function refreshOptions(){
        var html = '<table class="table table-bordered table-condensed"><thead><tr class="active">';
        var specs = [];
        if($('.spec_item').length<=0){
            $("#options").html('');
            $("#discount").html('');
            $("#isdiscount_discounts").html('');
                return;
            }
            $(".spec_item").each(function(i){
                var _this = $(this);

                var spec = {
                    id: _this.find(".spec_id").val(),
                    title: _this.find(".spec_title").val()
                };

                var items = [];
                _this.find(".spec_item_item").each(function(){
                    var __this = $(this);
                    var item = {
                        id: __this.find(".spec_item_id").val(),
                        title: __this.find(".spec_item_title").val(),
                        virtual: __this.find(".spec_item_virtual").val(),
                        show:__this.find(".spec_item_show").get(0).checked?"1":"0"
                    }
                    items.push(item);
                });
                spec.items = items;
                specs.push(spec);
            });
            specs.sort(function(x,y){
                if (x.items.length > y.items.length){
                    return 1;
                }
                if (x.items.length < y.items.length) {
                    return -1;
                }
            });
            console.log(specs)

            var len = specs.length;
            var newlen = 1;
            var h = new Array(len);
            var rowspans = new Array(len);
            for(var i=0;i<len;i++){
                html+="<th>" + specs[i].title + "</th>";
                var itemlen = specs[i].items.length;
                if(itemlen<=0) { itemlen = 1 };
                newlen*=itemlen;

                h[i] = new Array(newlen);
                for(var j=0;j<newlen;j++){
                    h[i][j] = new Array();
                }
                var l = specs[i].items.length;
                rowspans[i] = 1;
                for(j=i+1;j<len;j++){
                    rowspans[i]*= specs[j].items.length;
                }
            }

            html += '<th><div class=""><div style="padding-bottom:10px;text-align:center;">库存</div><div class="input-group"><input type="text" class="form-control  input-sm option_stock_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_stock\');"></a></span></div></div></th>';

            html += '<th><div class=""><div style="padding-bottom:10px;text-align:center;">市场价格</div><div class="input-group"><input type="text" class="form-control  input-sm option_marketprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_marketprice\');"></a></span></div></div></th>';
            html+='<th><div class=""><div style="padding-bottom:10px;text-align:center;">销售价格</div><div class="input-group"><input type="text" class="form-control  input-sm option_productprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_productprice\');"></a></span></div></div></th>';

            html+='<th><div class=""><div style="padding-bottom:10px;text-align:center;">编码</div><div class="input-group"><input type="text" class="form-control  input-sm option_goodssn_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_goodssn\');"></a></span></div></div></th>';
            html+='<th><div class=""><div style="padding-bottom:10px;text-align:center;">条码</div><div class="input-group"><input type="text" class="form-control  input-sm option_productsn_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_productsn\');"></a></span></div></div></th>';
            html+='<th><div class=""><div style="padding-bottom:10px;text-align:center;">重量（克）</div><div class="input-group"><input type="text" class="form-control  input-sm option_weight_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-angle-double-down" title="批量设置" onclick="setCol(\'option_weight\');"></a></span></div></div></th>';
            html+='</tr></thead>';

            for(var m=0;m<len;m++){
                var k = 0,kid = 0,n=0;
                for(var j=0;j<newlen;j++){
                    var rowspan = rowspans[m];
                    if( j % rowspan==0){
                        h[m][j]={title: specs[m].items[kid].title, virtual: specs[m].items[kid].virtual,html: "<td class='full' rowspan='" +rowspan + "'>"+ specs[m].items[kid].title+"</td>\r\n",id: specs[m].items[kid].id};
                    }
                    else{
                        h[m][j]={title:specs[m].items[kid].title,virtual: specs[m].items[kid].virtual, html: "",id: specs[m].items[kid].id};
                    }
                    n++;
                    if(n==rowspan){
                        kid++; if(kid>specs[m].items.length-1) { kid=0; }
                        n=0;
                    }
                }
            }

            var hh = "";
            for(var i=0;i<newlen;i++){
                hh+="<tr>";
                var ids = [];
                var titles = [];
                var virtuals = [];
                for(var j=0;j<len;j++){
                    hh+=h[j][i].html;
                    ids.push( h[j][i].id);
                    titles.push( h[j][i].title);
                    virtuals.push( h[j][i].virtual);
                }
                ids =ids.join('_');
                titles= titles.join('+');

                var val ={ id : "",title:titles, stock : "",presell : "",costprice : "",productprice : "",marketprice : "",weight:"",productsn:"",goodssn:"",virtual:virtuals };
                if( $(".option_id_" + ids).length>0){
                    val ={
                        id : $(".option_id_" + ids+":eq(0)").val(),
                        title: titles,
                        stock : $(".option_stock_" + ids+":eq(0)").val(),
                        presell : $(".option_presell_" + ids+":eq(0)").val(),
                        costprice : $(".option_costprice_" + ids+":eq(0)").val(),
                        productprice : $(".option_productprice_" + ids+":eq(0)").val(),
                        marketprice : $(".option_marketprice_" + ids +":eq(0)").val(),
                        goodssn : $(".option_goodssn_" + ids +":eq(0)").val(),
                        productsn : $(".option_productsn_" + ids +":eq(0)").val(),
                        weight : $(".option_weight_" + ids+":eq(0)").val(),
                        virtual : virtuals
                    }
                }

                hh += '<td>'
                hh += '<input data-name="option_stock_' + ids +'" type="text" class="form-control option_stock option_stock_' + ids +'" value="' +(val.stock=='undefined'?'':val.stock )+'"/></td>';
                hh += '<input data-name="option_id_' + ids+'" type="hidden" class="form-control option_id option_id_' + ids +'" value="' +(val.id=='undefined'?'':val.id )+'"/>';
                hh += '<input data-name="option_ids" type="hidden" class="form-control option_ids option_ids_' + ids +'" value="' + ids +'"/>';
                hh += '<input data-name="option_title_' + ids +'" type="hidden" class="form-control option_title option_title_' + ids +'" value="' +(val.title=='undefined'?'':val.title )+'"/></td>';
                hh += '<input data-name="option_virtual_' + ids +'" type="hidden" class="form-control option_virtual option_virtual_' + ids +'" value="' +(val.virtual=='undefined'?'':val.virtual )+'"/></td>';
                hh += '</td>';

                hh += '<td><input data-name="option_marketprice_' + ids+'" type="text" class="form-control option_marketprice option_marketprice_' + ids +'" value="' +(val.marketprice=='undefined'?'':val.marketprice )+'"/></td>';
                hh += '<td><input data-name="option_productprice_' + ids+'" type="text" class="form-control option_productprice option_productprice_' + ids +'" " value="' +(val.productprice=='undefined'?'':val.productprice )+'"/></td>';

                hh += '<td><input data-name="option_goodssn_' +ids+'" type="text" class="form-control option_goodssn option_goodssn_' + ids +'" " value="' +(val.goodssn=='undefined'?'':val.goodssn )+'"/></td>';
                hh += '<td><input data-name="option_productsn_' +ids+'" type="text" class="form-control option_productsn option_productsn_' + ids +'" " value="' +(val.productsn=='undefined'?'':val.productsn )+'"/></td>';
                hh += '<td><input data-name="option_weight_' + ids +'" type="text" class="form-control option_weight option_weight_' + ids +'" " value="' +(val.weight=='undefined'?'':val.weight )+'"/></td>';
                hh += "</tr>";
            }
            html+=hh;
            html+="</table>";
            $("#options").html(html);

            }




    function setCol(cls){
        $("."+cls).val( $("."+cls+"_all").val());
    }
    function showItem(obj){
        var show = $(obj).get(0).checked?"1":"0";
        $(obj).parents('.spec_item_item').find('.spec_item_show:eq(0)').val(show);
    }
    function nofind(){
        var img=event.srcElement;
        img.src="./resource/image/module-nopic-small.jpg";
        img.onerror=null;
    }

    function choosetemp(id){
        $('#modal-module-chooestemp').modal();
        $('#modal-module-chooestemp').data("temp",id);
    }
    function addtemp(){
        var id = $('#modal-module-chooestemp').data("temp");
        var temp_id = $('#modal-module-chooestemp').find("select").val();
        var temp_name = $('#modal-module-chooestemp option[value='+temp_id+']').text();
        //alert(temp_id+":"+temp_name);
        $("#temp_name_"+id).val(temp_name);
        $("#temp_id_"+id).val(temp_id);
        $('#modal-module-chooestemp .close').click();
        refreshOptions()
    }

    function setinterval(type)
    {
        var intervalfloor =$('#intervalfloor').val();
        if(intervalfloor=="")
        {
            intervalfloor=0;
        }
        intervalfloor = parseInt(intervalfloor);

        if(type=='plus')
        {
            if(intervalfloor==3)
            {
                tip.msgbox.err("最多添加三个区间价格");
                return;
            }
            intervalfloor=intervalfloor+1;
        }
        else if(type=='minus')
        {
            if(intervalfloor==0)
            {
                tip.msgbox.err("请最少添加一个区间价格");
                return;
            }
            intervalfloor=intervalfloor-1;
        }else
        {
            return;
        }

        if(intervalfloor<1)
        {

            $('#interval1').hide();
            $('#intervalnum1').val("");
            $('#intervalprice1').val("");
        }else
        {
            $('#interval1').show();
        }

        if(intervalfloor<2)
        {

            $('#interval2').hide();
            $('#intervalnum2').val("");
            $('#intervalprice2').val("");
        }else
        {
            $('#interval2').show();
        }

        if(intervalfloor<3)
        {

            $('#interval3').hide();
            $('#intervalnum3').val("");
            $('#intervalprice3').val("");
        }else
        {
            $('#interval3').show();
        }


        $('#intervalfloor').val(intervalfloor);

    }


</script>